<template>
	<view>
		<!-- 标签栏 -->
		<view class="tabs">
			<view v-for="(status, index) in appointmentStatus" :key="index" class="tab-item"
				:class="{ 'tab-item-active': currentTab === index }" @click="changeTab(index)">
				{{ status }}
			</view>
		</view>
		<!-- 标签页内容 -->
		<swiper :current="currentTab" class="swiper-container" style="height:500px;">
			<swiper-item v-for="(status, index) in appointmentStatus" :key="index">
				<view v-for="(item) in appointmentList">
					<uni-card title="预约挂号" :sub-title="formatDate2(item.updatedAt)" :extra="item.appointmentStatus"
						:thumbnail="avatar" @click="(event) => onClick(event, item)">
						<text class="uni-body">
							预约类型: {{ item.appointmentType }}
							预约时间: {{ formatDate(item.appointmentTime) }}
							备注: {{ item.notes }}
						</text>
					</uni-card>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';

	export default {
		computed: {
			...mapState('m_user', ['userId', 'userinfo']),
		},
		data() {
			return {
				currentTab: 0, // 当前选中的标签页索引，
				appointmentList: [],
				appointmentStatus: ['已预约', '已取消', '已完成'],
				avatar: '/static/apoment.jpg'
			}
		},
		onLoad() {
			this.changeTab(0);
		},
		onPullDownRefresh() {
			// 显示下拉刷新时的加载动画
			this.changeTab(this.currentTab).then(() => {
				// 请求成功后停止下拉刷新动画
				uni.stopPullDownRefresh();
			}).catch(error => {
				console.error('下拉刷新请求失败: ', error);
				// 请求失败后也应停止下拉刷新动画，但可以在UI上显示错误提示
				uni.stopPullDownRefresh();
			});
		},
		methods: {
			async changeTab(index) {
				try {
					this.currentTab = index;
					const res = await uni.$http.get(`/wx/appointlist/${this.userId}/${this.appointmentStatus[index]}`);
					this.appointmentList = res.data.data
					console.log(res.data.data)
				} catch (e) {
					console.error(e);
				}

			},
			formatDate(dateString) {
				const date = new Date(dateString);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			formatDate2(dateString) {
				// 使用JavaScript的字符串替换方法将'T'替换为一个空格
				return dateString.replace('T', ' ');
			},
			onClick(event, item) {
				if (item.appointmentStatus === '已预约') {
					// 跳转到预约成功页面，可以传递一些参数，比如预约详情
					console.log(item.appointmentId)
					uni.navigateTo({
						url: `/subpkg/appointment-success/appointment-success?appointmentId=${item.appointmentId}`
					});
				} else {
					uni.showToast({
						title: '此预约已完成或已取消',
						icon: 'none'
					});
				}
			}
		},
	}
</script>
<style scoped>
	.tabs {
		display: flex;
		justify-content: space-around;
		padding: 10px 0;
		position: sticky;
		top: 0;
		z-index: 10;
		border-bottom: 2px solid #efefef;
		background: #fff;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		background-color: #7bb3f8;
		width: 30%;
		border-radius: 100px;
		margin: 0 10px;
		cursor: pointer;
		padding: 5px;
		transition: background-color 0.3s;
		/* 添加过渡效果 */
	}

	.tab-item-active {
		background-color: #ffffff;
		/* 或你想要的其他颜色 */
		color: #7bb3f8;
		/* 可选：改变文字颜色以与背景形成对比 */
		border: 1px solid #7bb3f8;
	}

	.swiper-container {
		/* 高度已经通过内联样式设置 */
	}
</style>